<template>
	<view class="wrapBox" style="background:#000" v-if="pageInfo" >
		<view class="wrapBox_alap " :style="{ 'background-image':pageInfo.image !=''?'url('+pageInfo.image+')':pageInfo.diypage_bgcolor,'background-size':'cover','background-repeat':'no-repeat','background-position': 'center'}"> </view>
		<view class="wrapBox_con">
			<view class="wrapBox_til">
				  <navigator url="#" hover-class="navigator-hover">
					  <text>{{ pageInfo.name }}</text>
				  </navigator>
				  <view class="collect_icon" @click="click_collect">
					   <view :class="'collect '+(!is_collect?'collected':'')">{{ collect_tip }}</view>
				  </view>
			</view>
			<view class="wrapBox_lab"> 
				<view class="lab lab_i" v-if="pageInfo.is_own == true">自营</view>
				<view class="lab lab_z">综合评分 <view class="xing2"><view class="xing1" :style="{'width':pageInfo.score_mean >0 || pageInfo.score_mean < 5 ?64-(pageInfo.score_mean/5)*64+'px':'0px'}"> </view></view></view>
				<view class="lab">粉丝数{{ pageInfo.fans}}</view> 
			</view>  
		</view> 
	</view>
</template>

<script>
	var shop_common = require('../../../../utils/shop/common.js');
	var common = require('../../../../utils/common.js'); 
	var store_id
	export default {
		data() {
			return {  
				xingWd:'',
				pageInfo:'',
				is_collect:false,
				collect_tip:'收藏'
			}
		}, 
		props:['from'],
		watch:{},
		onLoad(option) {    
			var that = this
			store_id = option.store_id     
		}, 
		created() { 
		},
		mounted(){   
			var that = this     
			common.post('Mall&a=store', {
				'store_id': that.$route.query.store_id
			}, data => {      
				that.pageInfo = data
				if(data.collect == true){
					that.is_collect = true
					that.collect_tip = '已收藏'
				}else{
					that.is_collect = false
					that.collect_tip = '收藏'
				}
			})
		 
		},
		methods: {
			click_collect(){  
				var that = this    
				common.post('Mall&a=store_collection', {
					'store_id':that.$route.query.store_id
				}, data => {  
					that.is_collect = !that.is_collect   
					if(that.is_collect == true){
						that.collect_tip = '已收藏'
					}else{
						that.collect_tip = '收藏'
					}
					
				})
			} 
		}
	}
</script>

<style>  
.wrapBox{ 
	color: #fff; 
	height: 120px; 
}
.wrapBox_alap{
	filter: blur(1px);
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
	opacity: 0.8;
}
.wrapBox_con,.wrapBox_alap{
	position: absolute;
	left: 0px;
	top:0px;
	width: 100%;
	height: 120px;
	padding: 10px; 
	box-sizing: border-box;
}
.wrapBox_con{
	z-index: 8888;
}
.wrapBox_til text{
	padding-right: 20px;
	/* background: url(../../../../static/images/icon_pointRg.png) right center no-repeat; */
	background-size: 15px auto;
	font-size: 18px;
}
.wrapBox_lab{
	padding: 10px 0;
	display: flex;
	flex-direction: row;
	justify-content:flex-start;
	align-items:center;
}
.wrapBox_lab .lab{
	font-size: 10px;
	margin-right: 7px;
}
.wrapBox_lab .lab_i{
	padding: 0px 6px;
	border-radius: 20px;
	background: #e60000; 
	border-bottom: 1px solid #e60000;
}

.wrapBox_lab .lab.lab_z{
	background-color: rgba(0,0,0,0.4);
	padding: 4px 10px;
	border-radius: 20px;
} 

.scroll-view_H{
    width: 100%;
	white-space: nowrap;
}
.xing2{
	padding-right: 68px;
	position: relative;
	display: inline-block;
	height: 10px; 
	background: url(../../../../static/mall/xing2.png)  right center no-repeat;
}
.xing1{
	position: absolute;
	right: 0;
	top:0; 
	height: 10px;
	background: url(../../../../static/mall/xing1.png)  right center no-repeat;
}
.collect_icon{
	position: absolute;
	right: 10px;
	top:10px;
	z-index: 3;
	border:1px solid #ddd;
	border-radius: 20px;
	padding: 2px 10px;
	 
}

.collect_icon .collect{
	font-size: 13px;
	/* padding-left: 20px; */
	padding-right: 0;
	/* background: url(../../../../static/mall/icon_collect.png) left center no-repeat; */
	background-size: 14px 14px; 
	padding-bottom: 1px;
}
.collect_icon  .collected{
	background: url(../../../../static/mall/icon_collect.png) left center no-repeat; 
	background-size: 18px 18px; 
	padding-left: 20px;
	/* color: red; */
}

</style>